<template>
  <div class="activity-management">
    <h1>活动管理</h1>
    <div v-if="isAdmin">
      <button @click="showAddForm = true">添加活动</button>
      
      <div v-if="showAddForm" class="add-form">
        <h2>添加新活动</h2>
        <form @submit.prevent="addActivity">
          <div>
            <label>标题:</label>
            <input v-model="newActivity.title" type="text" required>
          </div>
          <div>
            <label>描述:</label>
            <textarea v-model="newActivity.description" required></textarea>
          </div>
          <div>
            <label>日期:</label>
            <input v-model="newActivity.date" type="date" required>
          </div>
          <div>
            <label>地点:</label>
            <input v-model="newActivity.location" type="text" required>
          </div>
          <button type="submit">提交</button>
          <button type="button" @click="cancelAdd">取消</button>
        </form>
      </div>
      
      <ul>
        <li v-for="activity in activities" :key="activity.id">
          <div>
            <span>{{ activity.title }} - {{ activity.date }}</span>
            <button @click="editActivity(activity)">编辑</button>
            <button @click="deleteActivity(activity.id)">删除</button>
          </div>
        </li>
      </ul>
    </div>
    <div v-else>
      <p>您没有权限访问此页面</p>
    </div>
  </div>
</template>

<script>
import activities from '@/assets/hw10_activities.json';

export default {
  name: 'ActivityManagement',
  data() {
    return {
      activities: [...activities],
      isAdmin: this.$store.state.userRole === 'admin',
      showAddForm: false,
      newActivity: {
        id: 0,
        title: '',
        description: '',
        date: '',
        location: ''
      }
    }
  },
  methods: {
    addActivity() {
      this.newActivity.id = this.activities.length + 1;
      this.activities.push({...this.newActivity});
      this.resetForm();
    },
    editActivity(activity) {
      // 实现编辑逻辑
    },
    deleteActivity(id) {
      this.activities = this.activities.filter(a => a.id !== id);
    },
    cancelAdd() {
      this.resetForm();
    },
    resetForm() {
      this.newActivity = {
        id: 0,
        title: '',
        description: '',
        date: '',
        location: ''
      };
      this.showAddForm = false;
    }
  }
}
</script>

<style scoped>
.activity-management {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
}
button {
  margin-left: 10px;
}
.add-form {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
}
</style>